<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            background-color: #282c34;

            /*透视,实现近大远xiao*/
            perspective: 1000px;
        }
        .album{
            /*子绝父相*/
            position: relative;
            width:240px;
            height:150px;
            margin:200px auto;

            /*开启子元素3d渲染*/
            transform-style:preserve-3d;

            /*沿x轴旋转*/
            /*transform:rotateX(-15deg);*/

            /*关键帧动画*/
            animation:rotate 20s linear infinite;
        }

        
        /*鼠标放到相册停止旋转*/
        .album:hover{
            animation-play-state: paused;
        }



        /*关键字*/
        @keyframes  rotate {
            from{
                transform:rotateX(-15deg) rotateY(0);
            }
            to{
                transform:rotateX(-15deg) rotateY(360deg);
            }

        }
        
        .album img{
            position: absolute;
            left:0;
            top:0;
            width:100%;
            height:100%;
        }
        /*设置六个图片的位置，六个图片，每个图片旋转360/60=60deg*/
        .album img:nth-child(1){
            transform:rotateY(-60deg) translateZ(300px) ;
        }
        .album img:nth-child(2){/*旋转之后再平移*/
            transform: rotateY(60deg) translateZ(300px);
        }
        .album img:nth-child(3){
            transform:rotateY(120deg) translateZ(300px) ;
        }
        .album img:nth-child(4){
            transform: rotateY(180deg) translateZ(300px);
        }
        .album img:nth-child(5){
            transform: rotateY(240deg) translateZ(300px);
        }
        .album img:nth-child(6){
            transform: rotateY(360deg) translateZ(300px);
        }

        /*让mid反方向反转,失败了*/
        .album .mid{
            animation:reverse 20s linear infinite;

        }
        @keyframes reverse {
            from{
                transform: rotateY(360deg);
            }
            to{
                transform: rotateY(0deg);
            }

        }
        .album:hover .mid{
            animation-play-state: paused;
        }

    </style>
</head>
<body>
<div class="album">
    <img src="/static/w2/day3/images/mv1.jpg" alt="缺失">
    <img src="/static/w2/day3/images/mv2.jpg" alt="缺失">
    <img src="/static/w2/day3/images/mv3.jpg" alt="缺失">
    <img src="/static/w2/day3/images/mv4.jpg" alt="缺失">
    <img src="/static/w2/day3/images/mv5.jpg" alt="缺失">
    <img src="/static/w2/day3/images/mv6.jpg" alt="缺失">
    <img class="mid" src="/static/w2/day3/images/mid.jpg" alt="qu">
    

</div>
</body>
</html>